<template>
  <view class="content">
    <form class="app-update-pv">


      <!-- ${location} -->


      <view
          :style='{"padding":"0","boxShadow":"0 0 0px rgba(0,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0.25)","borderColor":"#ccc","margin":"0 0 20rpx 0","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"308rpx"}'
          class="cu-form-group">
        <view
            :style='{"padding":"0","boxShadow":"0 0 16rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"160rpx","lineHeight":"80rpx","fontSize":"28rpx","borderStyle":"solid"}'
            class="title">评论内容
        </view>
        <textarea
            :style='{"padding":"20rpx","boxShadow":"0 0 0px rgba(0,0,0,.6) inset","margin":"0","backgroundColor":"rgba(255, 255, 255, 0)","borderColor":"rgba(0,0,0,.6)","borderRadius":"16rpx","color":"rgba(0, 0, 0, 1)","borderWidth":"2rpx","width":"calc(100% - 160rpx)","fontSize":"28rpx","borderStyle":"solid","height":"280rpx"}'
            v-model="ruleForm.content" placeholder="评论内容"></textarea>
      </view>


      <view class="btn">
        <button
            :style='{"padding":"0","boxShadow":"0 0 16rpx rgba(0,0,0,0) inset","margin":"0","backgroundColor":"rgba(209, 176, 134, 1)","borderColor":"rgba(209, 176, 134, 1)","borderRadius":"80rpx","color":"#fff","borderWidth":"0","width":"320rpx","fontSize":"28rpx","borderStyle":"solid","height":"80rpx"}'
            @tap="onSubmitTap" class="bg-red">提交
        </button>
      </view>
    </form>


  </view>
</template>

<script>
import wPicker from "@/components/w-picker/w-picker.vue";

export default {
  data() {
    return {
      cross: '',
      ruleForm: {
        refid: '',
        userid: '',
        nickname: '',
        content: '',
        reply: '',
      },
      // 登陆用户信息
      user: {},
      ro: {
        refid: false,
        userid: false,
        nickname: false,
        content: false,
        reply: false,
      },
    }
  },
  components: {
    wPicker
  },
  computed: {
    baseUrl() {
      return this.$base.url;
    },


  },
  async onLoad(options) {
    let table = uni.getStorageSync("nowTable");
    // 获取用户信息
    let res = await this.$api.session(table);
    this.user = res.data;


    // 如果有登陆，获取登陆后保存的userid
    this.ruleForm.userid = uni.getStorageSync("userid")
    if (options.refid) {
      // 如果上一级页面传递了refid，获取改refid数据信息
      this.ruleForm.refid = options.refid;
      this.ruleForm.nickname = uni.getStorageSync("nickname");
    }
    // 如果是更新操作
    if (options.id) {
      this.ruleForm.id = options.id;
      // 获取信息
      res = await this.$api.info(`discussjijieshipu`, this.ruleForm.id);
      this.ruleForm = res.data;
    }
    // 跨表
    this.cross = options.cross;

    this.styleChange()
  },
  methods: {
    styleChange() {
      this.$nextTick(() => {
        // document.querySelectorAll('.app-update-pv .cu-form-group .uni-input-input').forEach(el=>{
        //   el.style.backgroundColor = this.addUpdateForm.input.content.backgroundColor
        // })
      })
    },

    // 多级联动参数


    getUUID() {
      return new Date().getTime();
    },
    async onSubmitTap() {
      if ((!this.ruleForm.userid)) {
        this.$utils.msg(`用户id不能为空`);
        return
      }
      if ((!this.ruleForm.content)) {
        this.$utils.msg(`评论内容不能为空`);
        return
      }
      
      try {
        if (this.ruleForm.id) {
          await this.$api.update(`discussjijieshipu`, this.ruleForm);
        } else {
          await this.$api.add(`discussjijieshipu`, this.ruleForm);
        }
        uni.setStorageSync('discussjijieshipuCleanType', true);
        this.$utils.msgBack('提交成功');
      } catch (error) {
        this.$utils.msg('提交失败，请重试');
      }
    },
    optionsChange(e) {
      this.index = e.target.value
    },
    bindDateChange(e) {
      this.date = e.target.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      ;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    toggleTab(str) {
      this.$refs[str].show();
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20upx;
}

.content:after {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  content: '';
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

textarea {
  border: 1upx solid #EEEEEE;
  border-radius: 20upx;
  padding: 20upx;
}

.title {
  width: 180upx;
}

.avator {
  width: 150upx;
  height: 60upx;
}

.right-input {
  flex: 1;
  text-align: left;
  padding: 0 24upx;
}

.cu-form-group.active {
  justify-content: space-between;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20upx 0;
}

.cu-form-group {
  padding: 0 24upx;
  background-color: transparent;
  min-height: inherit;
}

.cu-form-group + .cu-form-group {
  border: 0;
}

.cu-form-group uni-input {
  padding: 0 30upx;
}

.uni-input {
  padding: 0 30upx;
}

.cu-form-group uni-textarea {
  padding: 30upx;
  margin: 0;
}

.cu-form-group uni-picker::after {
  line-height: 80rpx;
}

.select .uni-input {
  line-height: 80rpx;
}

.input .right-input {
  line-height: 88rpx;
}
</style>
